<template>
    <div class="comment-section">
      <el-card>
        <h3>评论区</h3>
        <el-form @submit.prevent="addComment" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="newComment.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="评论内容">
            <el-input type="textarea" v-model="newComment.content" placeholder="请输入评论内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" native-type="submit">提交评论</el-button>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <el-table :data="comments" style="width: 100%">
          <el-table-column prop="username" label="用户名" width="180"></el-table-column>
          <el-table-column prop="content" label="评论内容"></el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button size="small" @click="deleteComment(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalComments"
          :page-size="pageSize"
          @current-change="handlePageChange"
        ></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        newComment: {
          username: '',
          content: ''
        },
        comments: [],
        totalComments: 0,
        pageSize: 5,
        currentPage: 1
      };
    },
    methods: {
      addComment() {
        if (this.newComment.username &&this.newComment.content) {
          this.comments.push({ ...this.newComment });
          this.newComment.username = '';
          this.newComment.content = '';
          this.totalComments += 1;
        }
      },
      deleteComment(index) {
        this.comments.splice(index, 1);
        this.totalComments -= 1;
      },
      handlePageChange(page) {
        this.currentPage = page;
      }
    }
  };
  </script>
  
  <style scoped>
  .comment-section {
    padding: 20px;
    
  }
  </style>
  